<script>
import {onMounted, ref} from "vue";
import Son from "./components/son.vue"

export default {
  name: "App",
  components: {Son},
  setup(props, context) {
    /*
      ref：用于注册模板引用。
        如果用于普通 DOM 元素，引用将是元素本身；如果用于子组件，引用将是子组件的实例
        预期：string | Function
        ref 用于注册元素或子组件的引用
        使用选项式 API，引用将被注册在组件的 this.$refs 对象里
        使用组合式 API，引用将存储在与名字匹配的 ref 里
    */
    // 定义两个ref用于引用组件实例和DOM元素
    const btnRef = ref()
    const sonRef = ref()
    const getBtnElement = () => {
      // 获取原生DOM元素
      console.log(btnRef.value)
      console.log(sonRef.value.count)
      sonRef.value.showInfo()
    }
    onMounted(() => {
      // 获取原生DOM元素
      console.log(btnRef.value)
      console.log(sonRef.value.count)
      sonRef.value.showInfo()
    })
    return {
      btnRef,
      sonRef,
      getBtnElement
    }
  }
}
</script>
<template>
  <div id="app">
    <div ref="btnRef">我是div</div>
    <son ref="sonRef"></son>
    <button @click="getBtnElement">点击</button>
  </div>
</template>

<style lang="less"></style>
